<template lang="pug">
//- div(style='padding: 40px 80px 40px 40px')
div(v-if='article')
  Breadcrumb
    BreadcrumbItem 图文模块
    BreadcrumbItem(href='/articles') 图文管理
    BreadcrumbItem {{ article.title }}
  Row
    Col(:span=24)
      Form(:model='formData', :label-width=60)
        FormItem(label='封面')
          CoverUploader(@on-upload='onCoverUpload', :defaultCover='article.cover.url')
        FormItem(label='标题')
          Input(v-model='formData.title')
        FormItem(label='发布时间')
          DatePicker(type='datetime',format='yyyy-MM-dd',placeholder='选择时间',style='width: 200px',v-model='Time')
        FormItem(label='链接地址')
          Input(v-model='formData.link', type='link')
        //- FormItem(label='摘要')
          Input(type='textarea', :rows=3, :maxlength=80, v-model='formData.abstract', placeholder='不超过80字')
        FormItem(label='分类')
          SelectCategory(:defaultValue='article.category.map(item => item.id)', module='article', :multiple='true', @change='setCategory')
        //- FormItem
          Editor(v-model='formData.body')
        //- FormItem(label='图册')
          GalleryUploader(v-model='formData.gallery')
        FormItem(label='置顶')
          i-switch(v-model='formData.sticky')
            Icon(type='android-done', slot='open')
            Icon(type='android-close', slot='close')
        FormItem(label='发布')
          i-switch(v-model='formData.published')
            Icon(type='android-done', slot='open')
            Icon(type='android-close', slot='close')
        FormItem
          Button(type='primary', @click='submit', :loading='loading') {{ loading ? '保存中...' : '保存' }}
    //- Col(:span=12)
      Affix(:offset-top=20)
        div.article-preview.pull-right
          h2 {{ formData.title }}
          div.ql-snow
            div.ql-editor(v-html='formData.body', style='padding: 0')
          //- quill-editor(v-model='formData.body', :options='previewEditorOptions')
</template>

<script>

import CoverUploader from '@/components/CoverUploader'
import SelectCategory from '@/components/SelectCategory'
import Api from '@/apis/article'

export default {
  beforeRouteEnter (to, form, next) {
    Api.getArticleLinkDetail(to.params.id).then(article => {
      next(vm => {
        vm.article = article
        vm.formData.id = article.id
        vm.formData.published = article.published
        vm.formData.title = article.title
        vm.formData.link = article.link
        vm.formData.abstract = article.abstract
        vm.formData.cover = article.cover.id
        vm.formData.category = article.category
        vm.formData.sticky = article.sticky
        vm.formData.created_timestamp = article.created_timestamp
      })
    })
  },
  components: {
    CoverUploader,
    // GalleryUploader,
    SelectCategory
  },
  data () {
    return {
      loading: false,
      article: null,
      formData: {
        id: '',
        title: '',
        link: '',
        abstract: '',
        // body: '',
        cover: null,
        category: null,
        status: false,
        created_timestamp: 0,
        sticky: false
        // gallery: []
      }
    }
  },
  computed: {
    Time: {
      get: function () {
        var time = this.formData.created_timestamp * 1000
        var myDate = new Date(time)
        function double (time) {
          if (time < 10)time = '0' + time
          return time
        }
        var formatDate = myDate.getFullYear() + '-' + double((myDate.getMonth() + 1)) + '-' + double(myDate.getDate())
        return formatDate
      },
      set: function (value) {
        var date = new Date(value.toString())
        if (isNaN(date.getFullYear()) || isNaN(date.getMonth()) || isNaN(date.getDate()) || isNaN(date.getHours()) || isNaN(date.getMinutes()) || isNaN(date.getSeconds())) {
          console.log('日期错误')
        } else {
          this.formData.created_timestamp = date.getTime() / 1000
        }
        console.log('created_timestamp', this.formData.created)
      }
    }
  },
  methods: {
    validate () {
      return this.formData.title.trim() && this.formData.link
    },
    submit () {
      if (this.validate()) {
        this.loading = true
        Api.patchArticleLink(this.formData).then(() => {
          this.loading = false
          // this.$router.push('/articles')
          this.$Message.success('更新成功')
        })
      } else {
        this.$Message.error('data incomplete')
      }
    },
    onCoverUpload (file) {
      this.formData.cover = file.id
    },
    setCategory (items) {
      this.formData.category = items.map(item => ({
        id: item.value,
        name: item.label
      }))
    }
  }
}
</script>

<style lang="less">
.quill-editor .ql-container {
  height: 300px;
}

.article-cover-uploader {
  .ivu-upload-select {
    width: 100%; // padding-bottom: 66.7%;
    // height: 0;
  }
}


.article-preview {
  // margin: 0 10px;
  padding: 10px; // height: 100%;
  width: 375px;
  height: 667px;
  overflow-y: scroll;
  border: 5px solid #eee;

  .quill-editor {
    height: 100%;
  }
}

</style>

